<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
      <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <title>Trixter</title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width">

            <link rel="stylesheet" href="css/normalize.min.css">
            <link rel="stylesheet" href="css/main.css">
            <!--[if lte IE 8]>
                <link rel="stylesheet" href="css/lteie8.css" />
            <![endif]-->

            <script src="js/vendor/modernizr-2.6.2.min.js"></script>
      </head>
      <body>
            <!--[if lt IE 7]>
                <div id='lt-msie'>
                  <p>   O seu browser não suporta
                        algumas funcionalidades deste site.<br/>
                        Para visualizá-lo adequadamente,<br/>
                        recomendamos atualizar o 
                        seu navegador para uma<br/>
                        <a href="http://browsehappy.com/">versão mais recente</a>.
                  </p>
                </div>
            <![endif]-->
            <header class="default-width-and-center" id="js-header">
                  <nav>
                        <h1> 
                              <a href="#banner" target="_self" class="sprite" id="trixter"><span>Trixter</span></a>
                        </h1>
                        <ul>
                              <li><a href="#about-us" target="_self" id="btnAbout"        data-time='3000'>QUEM SOMOS</a></li>
                              <li><a href="#services" target="_self" id="btnServices"     data-time='8000'>SERVIÇOS</a></li>
                              <li><a href="#clients"  target="_self" id="btnClients"      data-time='4000' >CLIENTES</a></li>
                              <li><a href="#cases"    target="_self" id="btnCases"        data-time='6000'>CASES</a></li>
                              <li><a href="#contact"  target="_self" id="btnContact"      data-time='4000'>CONTATO</a></li>
                        </ul>
                  </nav>
            </header>

            <canvas id="back-animation">
                  <div id="no-canvas"><span>Trixter</span></div>
            </canvas>
            <div id="top" class="full-width section-container">
                  <section id='banner' class="default-width-and-center">
                        <button class="sprite" id="toLeftBanner"><span>Para esquerda.</span></button>
                        <ul>
                              <li><img src='img/banners/app.png' alt="Aplicativos: Coleção Aquaplicativos da editora Letra e Ponto."/></li>
                              <li><img src='img/banners/climbing.png' alt="Game: Climbing Races, para Facebook."/></li>
                              <li><img src='img/banners/e-book.png' alt="Aplicativos: Livro inteativo da editora Letra e Ponto."/></li>
                              <li><img src='img/banners/popis.png' alt="Web 2.0: Edtiore de sites Popis."/></li>
                        </ul>
                        <button class="sprite" id="toRightBanner"><span>Para direita.</span></button>
                  </section>
                  <section id='about-us' class="minimal-width-and-center-in-right">
                        <h1>Quem Somos</h1>
                        <p>Trixter deriva de trickster, um ser mitológico, geralmente astuto e engraçado, um mensageiro que conecta homens e deuses, energia e existência, seriedade e diversão. Em sua função arquetípica, o trickster desafia, provoca, quebra regras e, justamente por sua natureza transgressora, é capaz de transpor a barreira entre a certeza e a dúvida, os velhos modelos e as novas possibilidades.</p>
                        <p>Assim é a Trixter: uma empresa séria em seus valores, mas lúdica em sua essência. Não desenvolvemos simplesmente tecnologia, mas experiências que buscam aliar inovação, eficiência e resultados aos nossos clientes.</p>
                  </section>
                  <section id='services' class="minimal-width-and-center-in-right">
                        <h1>Serviços</h1>
                        <p>Para não ficar muito cansativo vou agora ensinar a fazer um belo miojo, ferva trezentos mls de água em uma panela, quando estiver fervendo coloque o miojo, espere cozinhar por três minutos, retire o miojo do fogão, misture bem e sirva.</p>
                        <p>Frite bacon em fogo alto, em sua própria gordura, por dois minutos. Em outra panela, coloque quatrocentos e cinquenta ml de água e leve ao fogo alto até ferver. Junte o macarrão e deixe cozinhar. Quando estiver pronto, misture com o bacon e sirva quente.</p>
                        <p>Ferva meio litro de água em uma panela e coloque o miojo, deixando cozinhar um pouco. Retire e frite no óleo e alho até ficar douradinho. Misture creme de leite, queijo ralado, requeijão e champignon. O miojo vai ficar molhadinho, com aspecto piamontese.</p>
                        <p>Regue o fundo de um refratário retangular pequeno com polpa de tomate e a água. Disponha o miojo, separado em duas partes, e cubra com queijo. Cubra com papel-alumínio e leve ao forno médio, preaquecido, por quinze minutos. Retire do forno e sirva em seguida.</p>                
                  </section>
                  <section id='clients'>
                        <h1 class="minimal-width-and-center-in-right">Clientes</h1>
                        <ul>
                              <li class="sprite clients-sprite" id='globo'><span>Rede Globo de Televisão</span></li>
                              <li class="sprite clients-sprite" id='letraPonto'><span>Letra e Ponto</span></li>
                              <li class="sprite clients-sprite" id='popis'><span>Popis</span></li>
                        </ul>
                  </section>
            </div>
            <div id="middle" class="full-width section-container">
                  <section id='cases' class="">
                        <h1>Cases</h1>
                        <ul>
                              <li>
                                    <div class="thumb-container thumb-in-left">
                                          <img src='img/cases/thumbs/letraPonto.png' alt=""/>
                                          <h2>Letra e Ponto</h2>
                                    </div>
                                    <div class="sprite boxPortrait">
                                          <figure>
                                                <ul>
                                                      <li><img src='img/cases/details/letraPonto/case1.jpg' alt=""/></li>
                                                      <li><img src='img/cases/details/letraPonto/case2.jpg' alt=""/></li>
                                                </ul>
                                                <figcaption>
                                                      <dfn>Letra e Ponto</dfn>
                                                      <dl>
                                                            <dt>Descrição:</dt>
                                                            <dd>Desenvolvimento de portal e sistema para criação e edição online de sites.</dd>
                                                            <dt>Tecnologia:</dt>
                                                            <dd>ASP.Net/PHP/Flash/Flex/MySQL/SQL Server</dd>
                                                            <dt>Endereço:</dt>
                                                            <dd><a href='http://www.letraeponto.com.br/' title="Letra e Ponto" target="_blank">www.letraeponto.com.br</a></dd>
                                                      </dl>
                                                </figcaption>
                                          </figure>
                                          <nav>
                                                <ul>
                                                      <li class="sprite btnX"><button><span>fechar</span></button></li>
                                                      <li class="sprite toRight"><button><span>Avançar</span></button></li>
                                                      <li class="sprite toLeft"><button><span>Voltar</span></button></li>
                                                </ul>
                                          </nav>
                                    </div>
                              </li>
                              <li>
                                    <div class="thumb-container thumb-in-ringht">
                                          <img src='img/cases/thumbs/letraPonto.png' alt=""/>
                                          <h2>Letra e Ponto</h2>
                                    </div>
                                    <div class="sprite boxPortrait">
                                          <figure>
                                                <ul>
                                                      <li><img src='img/cases/details/letraPonto/case1.jpg' alt=""/></li>
                                                      <li><img src='img/cases/details/letraPonto/case2.jpg' alt=""/></li>
                                                </ul>
                                                <figcaption>
                                                      <dfn>Letra e Ponto</dfn>
                                                      <dl>
                                                            <dt>Descrição:</dt>
                                                            <dd>Desenvolvimento de portal e sistema para criação e edição online de sites.</dd>
                                                            <dt>Tecnologia:</dt>
                                                            <dd>ASP.Net/PHP/Flash/Flex/MySQL/SQL Server</dd>
                                                            <dt>Endereço:</dt>
                                                            <dd><a href='http://www.letraeponto.com.br/' title="Letra e Ponto" target="_blank">www.letraeponto.com.br</a></dd>
                                                      </dl>
                                                </figcaption>
                                          </figure>
                                          <nav>
                                                <ul>
                                                      <li class="sprite btnX"><button><span>fechar</span></button></li>
                                                      <li class="sprite toRight"><button><span>Avançar</span></button></li>
                                                      <li class="sprite toLeft"><button><span>Voltar</span></button></li>
                                                </ul>
                                          </nav>
                                    </div>
                              </li>
                        </ul>
                  </section>
            </div>
            <div id='bottom' class="full-width section-container">
                  <section id='contact' class="minimal-width-and-center-in-right">
                        <h1>Contato</h1>
                        <div class="sprite boxContact">
                              <aside class="vcard">
                                    <p>
                                          <span class="org">Trixter, </span>
                                          <span class="street-address">Alameda Araguaia, 2190, Bloco A, sala 1106</span>
                                          <br/>
                                          <span class="locality">Alphaville - Barueri</span>/<span class="region">São Paulo,</span><span class="postal-code"> 06455-000, </span><span class="country">Brasil</span>
                                          <br/>
                                          <span class="tel">Tel:<span class="value">+55 (11) 4191-1197</span></span>
                                          <a title="Facebook:Trixter" id="facebook" target="_blank" class="url sprite" href="https://www.facebook.com/trixtergames"><span>Facebook</span></a>
                                    </p>
                              </aside>
                              <form action="#" method="POST" enctype="text/plain">
                                    <label for="name">Nome</label><input type="text" id="name"/>
                                    <label for="e-mail">E-mail</label><input type="text" id="e-mail"/>
                                    <label for="comments">Comentário</label><textarea id="comments"></textarea>
                                    <input type="submit" value="Enviar">
                              </form>
                        </div>
                  </section>
            </div>
            <footer class="full-width"><small>Trixter 2013 &copy; Todos os direitos reservados.</small></footer>

            <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenLite.min.js"></script>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TimelineMax.min.js"></script>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
            <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.js"><\/script>');</script>
            <script src="http://malsup.github.com/jquery.cycle.lite.js"></script>

            <script src="js/EasePack.min.js"></script>
            <script src="js/plugins.js"></script>
            <script src="js/pixi.js"></script>
            <script src="js/TrixterAnimation.js"></script>
            <script src="js/main.js"></script>

            <script>
                  var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
                  (function(d, t) {
                        var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
                        g.src = '//www.google-analytics.com/ga.js';
                        s.parentNode.insertBefore(g, s);
                  }(document, 'script'));
            </script>
      </body>
</html>